<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>visibility属性</title>
  </head>
  <style>
    /* 
    一.visibility的属性
      1.1 默认值：visible.显示元素
      1.2 hidden，隐藏元素，虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
    二.visibility和display的区别
      2.1 visibility:hidden是隐藏，但是还在占位置
      2.2 display:none为不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置

     */
    .content div {
      height: 100px;
    }

    .content div:first-child {
      background-color: pink;
      visibility: hidden;
    }

    .content div:nth-child(2) {
      background-color: red;
      display: none
    }

    .content div:last-child {
      background-color: black;
    }
  </style>

  <body>
    <div class="content">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>

</html>